import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import vueJsxPlugin from '@vitejs/plugin-vue-jsx'
// 导入自动导包的插件
import AutoImport from 'unplugin-auto-import/vite'
// 导入自动导vue组件的插件
import Components from 'unplugin-vue-components/vite'
// 导入模块化导入svg的插件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 导入模块化导入svg的插件
import UnpluginSvgComponent from 'unplugin-svg-component/vite'
// mock插件提供方法
import { viteMockServe } from 'vite-plugin-mock'
// 用于自动生成 Element-Plus 图标类型
import IconTypesPlugin from './plugins/vite-plugin-elementplusicons-types'

// https://vitejs.dev/config/
export default defineConfig((config) => {
    const env = loadEnv(config.mode, process.cwd())
    return {
        plugins: [
            // 用于自动生成 Element-Plus 图标类型
            IconTypesPlugin({
                // 生成的类型声明文件位置 默认路径 './src/types/el-icon-name.d.ts'
                dts: false,
                // 图标名字前缀 "el-图标名字"
                prefix: 'el',
            }),
            vue(),
            vueJsxPlugin(),
            AutoImport({
                // imports用来指定需要自动导入的包
                imports: ['vue', 'pinia', 'vue-router', '@vueuse/core', 'vue-i18n'],
                // 自动生成类型描述文件
                dts: './src/types/auto-imports.d.ts',
                // 指定一个目录，目录下的文件会被自动导入
                dirs: ['./src/**/*'],
                // 是否支持在vue模版中使用自动导入
                vueTemplate: true,
                resolvers: [
                    // 自动导入Element-Plus包
                    ElementPlusResolver({ importStyle: true }),
                    // 自动导入图标组件
                    // IconsResolver({
                    //   // prefix: 'icon',
                    // }),
                ],
            }),
            Components({
                // 自动导入指定目录下的vue组件
                dirs: ['./src/components', './src/views', './src/layout'],
                // 自动生成类型描述文件
                dts: './src/types/components.d.ts',

                resolvers: [
                    // 自动注册Element-Plus中的vue组件
                    ElementPlusResolver({ importStyle: true }),
                    // 自动注册图标组件
                    // IconsResolver({
                    //   // prefix: 'icon',
                    //   // 指定collection，即指定为elementplus图标集ep
                    //   enabledCollections: ['ep'],
                    // }),
                ],
            }),
            UnpluginSvgComponent({
                // svg文件目录
                iconDir: ['./src/assets/svgs'],
                // 是否自动生成类型描述文件
                dts: true,
                // 类型描述文件目录
                dtsDir: './src/types',
                // 图标名字前缀 "icon-图标名字"
                prefix: 'icon',
                // 保留颜色的svg目录
                preserveColor: path.resolve(__dirname, './src/assets/svgs/preserveColor'),
            }),
            viteMockServe({
                mockPath: './mock',
            }),
        ],
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'src'),
            },
        },
        // 解决Sass警告
        /* Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. */
        css: {
            preprocessorOptions: {
                scss: {
                    api: 'modern-compiler', // or 'modern'
                },
            },
        },
        // 中转服务器
        server: {
            // 通过代理实现跨域, 搭理这个地址http://localhost:8081
            proxy: {
                // 路径, 作为就是替换域名
                [env.VITE_APP_BASE_API]: {
                    target: env.VITE_SERVE, // 获取数据服务器地址设置
                    changeOrigin: true, // 需要代理跨域
                    secure: false, // 如果是https接口，需要配置这个参数
                    // rewrite: (path) => path.replace(/^\/api/, ''), // 路径重写，本地服务器需要把这句注释掉
                },
            },
        },
    }
})
